<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			width: 992px;
			height: 460px;
			background-color: #ccc;
			margin: 50px auto;
			position: relative;
		}

		.left,
		.right {
			width: 60px;
			height: 80px;
			background-color: rgba(0, 0, 0, .6);
			position: absolute;
			top: 50%;
			/*left: 0;*/
			margin-top: -40px;
			color: #fff;
			text-align: center;
			line-height: 80px;
			font-size: 26px;
			cursor: pointer;
			/*display: none;*/
		}

		.right {
			right: 0;
		}

		.left {
			z-index: 1;
		}

		img {
			width: 300px;
			height: 300px;
			position: absolute;
		}

		.first {
			z-index: 1;
		}

		.circle	{
			width: 160px;
			height: 20px;
			/*background-color: #ff3040;*/
			position: absolute;
			right: 60px;
			bottom: 20px;
		}

		.circle ul li {
			list-style: none;
			width: 20px;
			height: 20px;
			background-color: #666;
			float: left;
			margin-right: 10px;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="left"><</div>
		<div class="right">></div>
		<!-- <img src="images/adv.jpg" alt="" class="first">
		<img src="images/sun.jpg" alt=""> -->
		<div class="circle">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>
</body>
</html>